<template>
  <div class="content-container" style="position: relative">
    <div style="height: 10px"></div>
    <div class="panel"    v-loading="loading"
         element-loading-text="加载中"
         element-loading-spinner="el-icon-loading">
        <div class="content">
          <vue-office-docx :src="data.gzzdj" @rendered="loadedDocx"></vue-office-docx>
        </div>
      </div>


  </div>
</template>
<script>
import ReturnBtn from "@/views/components/ReturnBtn.vue";

export default {
  name:"law-detail",
  components:{
    ReturnBtn
  },
  data(){
    return {
      loading:true,
      data:{
        gzzdj:"https://lgstore.fjrcsz.com/lgstore/20240805/common/file/word/20241127161045306e309e9c6be0f0db.docx",

      }
    }
  },
  mounted() {

  },
  methods:{
    loadedDocx(){
      this.loading=false
    }
  }
}
</script>

<style lang="scss" scoped >
.panel{
    box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 1);
    width: 1850px;
    margin: 0px auto 0px auto;
    padding: 0px 20px 10px 20px;
    min-height: calc(100vh - 60px);
  .title{
    font-size: 30px;
    font-weight: bolder;
  }
  .time{
    text-align: left;
    padding-left: 50px;
    margin-top: 10px;
  }
  .content{
    border-top: 1px dashed #2c3e50;
    padding-top: 20px;
    margin-top: 20px;
    text-align: left;
    overflow-y: auto;
  }
}

</style>
<style lang="scss">
.docx-wrapper { background: rgba(0,0,0,0) !important; padding: 30px; padding-bottom: 0px; display: flex; flex-flow: column; align-items: center; }

</style>
